<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>测试用例编辑器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .edit-container {
            max-width: 1400px;
            margin: 2rem auto;
            padding: 0 15px;
        }

        .config-card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 3px 15px rgba(0,0,0,0.08);
            padding: 1.5rem;
            margin-bottom: 1.8rem;
            position: relative;
        }

        .step-list-card {
            width: 320px;
            height: calc(100vh - 200px);
            border-right: 1px solid #e0e4e9;
            background: #f8fafc;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .step-items-container {
            overflow-y: auto;
            padding: 12px;
        }

        .step-item {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
            margin: 8px 0;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }

        .step-item.active {
            border-color: #3b82f6;
            background: #f0f4ff;
            box-shadow: 0 2px 6px rgba(59,130,246,0.15);
        }

        .editor-textarea {
            font-family: 'Fira Code', monospace;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 15px;
            height: 300px;
            resize: vertical;
        }

        @media (max-width: 992px) {
            .step-list-card {
                width: 100%;
                height: auto;
            }
        }
    </style>
</head>
<body>
<div class="edit-container">
    <!-- 全局配置 -->
    <div class="config-card">
        <div class="d-flex justify-content-between mb-4">
            <h3>全局配置</h3>
            <div class="action-buttons-top">
                <button class="btn btn-sm btn-outline-primary">保存</button>
                <button class="btn btn-sm btn-success">执行</button>
            </div>
        </div>
        <div class="row g-3">
            <div class="col-12">
                <label class="form-label">用例名称</label>
                <input id="global-name" type="text" class="form-control">
            </div>
            <div class="col-md-6">
                <label class="form-label">域名</label>
                <input id="global-host" type="text" class="form-control">
            </div>
            <div class="col-md-3">
                <label class="form-label">端口</label>
                <input id="global-port" type="number" class="form-control" value="443">
            </div>
        </div>
    </div>

    <!-- 步骤编辑区 -->
    <div class="d-flex flex-column flex-md-row gap-3">
        <!-- 步骤列表 -->
        <div class="step-list-card">
            <div class="p-3 border-bottom">
                <button id="add-step" class="btn btn-primary btn-sm w-100">+ 添加步骤</button>
            </div>
            <div class="step-items-container" id="step-list"></div>
        </div>

        <!-- 步骤编辑器 -->
        <div class="config-card flex-grow-1" id="step-editor">
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label">步骤名称</label>
                    <input type="text" class="form-control" id="step-name">
                </div>
                <div class="col-md-6">
                    <label class="form-label">协议类型</label>
                    <select class="form-select" id="protocol">
                        <option>HTTP</option>
                        <option>HTTPS</option>
                    </select>
                </div>
                <div class="col-12">
                    <label class="form-label">接口URL</label>
                    <input type="url" class="form-control" id="api-url">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Content-Type</label>
                    <select class="form-select" id="content-type">
                        <option>application/json</option>
                        <option>text/xml</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="ssl-checkbox">
                        <label class="form-check-label">SSL验证</label>
                        <input type="text" class="form-control mt-2" id="ssl-path"
                               placeholder="证书路径" style="display: none;">
                    </div>
                </div>
            </div>

            <!-- 配置Tabs -->
            <div class="config-tabs">
                <ul class="nav nav-tabs mb-3">
                    <li class="nav-item"><a class="nav-link active" href="#variables">接口参数</a></li>
                    <li class="nav-item"><a class="nav-link" href="#extract">参数提取</a></li>
                    <li class="nav-item"><a class="nav-link" href="#export">导出参数</a></li>
                    <li class="nav-item"><a class="nav-link" href="#validators">断言配置</a></li>
                    <li class="nav-item"><a class="nav-link" href="#script">脚本编辑</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="variables">
                        <textarea class="editor-textarea" id="variables"></textarea>
                    </div>
                    <div class="tab-pane" id="extract">
                        <textarea class="editor-textarea" id="extract"></textarea>
                    </div>
                    <div class="tab-pane" id="export">
                        <textarea class="editor-textarea" id="export"></textarea>
                    </div>
                    <div class="tab-pane" id="validators">
                        <textarea class="editor-textarea" id="validators"></textarea>
                    </div>
                    <div class="tab-pane" id="script">
                        <textarea class="editor-textarea" id="script"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
class TestCaseEditor {
    constructor() {
        this.steps = new Map();
        this.currentStepId = null;
        this.initEventListeners();
        this.initGlobalConfig();
    }

    // 初始化全局配置
    initGlobalConfig() {
        this.globalConfig = {
            name: $('#global-name').val() || '未命名用例',
            host: $('#global-host').val() || 'api.example.com',
            port: parseInt($('#global-port').val()) || 443
        };
    }

    // 事件监听
    initEventListeners() {
        // 步骤操作
        $('#add-step').click(() => this.createStep());
        $('#step-list').on('click', '.step-item', (e) => {
            if ($(e.target).hasClass('delete-step')) return;
            const stepId = $(e.currentTarget).data('id');
            this.selectStep(stepId);
        }).on('click', '.delete-step', (e) => {
            e.stopPropagation();
            const stepId = $(e.currentTarget).closest('.step-item').data('id');
            this.deleteStep(stepId);
        });

        // 表单同步
        $('#step-editor :input').on('input', () => this.debouncedSync());
        $('.nav-tabs a').on('shown.bs.tab', () => this.syncCurrentStep());
        $('#ssl-checkbox').change(() => {
            $('#ssl-path').toggle(this.isSslEnabled());
            this.syncCurrentStep();
        });
    }

    // 创建新步骤
    createStep() {
        const stepId = Date.now().toString();
        this.steps.set(stepId, this.createStepData(stepId));
        this.renderSteps();
        this.selectStep(stepId);
    }

    // 步骤数据模板
    createStepData(id) {
        return {
            id,
            name: `步骤 ${this.steps.size + 1}`,
            protocol: 'HTTP',
            config: {
                apiUrl: '',
                contentType: 'application/json',
                ssl: {
                    enabled: false,
                    certPath: ''
                },
                tabs: {
                    variables: '{\n  "username": "testuser"\n}',
                    extract: '{}',
                    export: '{}',
                    validators: '[]',
                    script: '// 预请求脚本'
                }
            }
        };
    }

    // 选择步骤
    selectStep(stepId) {
        if (this.currentStepId) this.syncCurrentStep();

        this.currentStepId = stepId;
        const step = this.steps.get(stepId);

        // 更新表单
        $('#step-name').val(step.name);
        $('#protocol').val(step.protocol);
        $('#api-url').val(step.config.apiUrl);
        $('#content-type').val(step.config.contentType);
        $('#ssl-checkbox').prop('checked', step.config.ssl.enabled);
        $('#ssl-path').val(step.config.ssl.certPath).toggle(step.config.ssl.enabled);

        // 加载所有选项卡数据
        Object.entries(step.config.tabs).forEach(([tabId, value]) => {
            $(`#${tabId}`).val(value);
        });

        this.highlightStep(stepId);
    }

    // 同步当前步骤数据
    syncCurrentStep() {
        if (!this.currentStepId) return;

        const step = this.steps.get(this.currentStepId);
        step.name = $('#step-name').val().trim();
        step.protocol = $('#protocol').val();
        step.config = {
            apiUrl: $('#api-url').val().trim(),
            contentType: $('#content-type').val(),
            ssl: {
                enabled: $('#ssl-checkbox').prop('checked'),
                certPath: $('#ssl-path').val().trim()
            },
            tabs: {
                variables: $('#variables').val(),
                extract: $('#extract').val(),
                export: $('#export').val(),
                validators: $('#validators').val(),
                script: $('#script').val()
            }
        };
    }

    // 删除步骤
    deleteStep(stepId) {
        if (!this.steps.has(stepId)) return;

        this.steps.delete(stepId);
        if (this.currentStepId === stepId) {
            this.currentStepId = this.steps.keys().next().value;
            this.currentStepId ? this.selectStep(this.currentStepId) : $('#step-editor').hide();
        }
        this.renderSteps();
    }

    // 渲染步骤列表
    renderSteps() {
        const $container = $('#step-list').empty();
        this.steps.forEach(step => {
            $container.append(`
                <div class="step-item ${step.id === this.currentStepId ? 'active' : ''}"
                     data-id="${step.id}">
                    <div class="d-flex justify-content-between align-items-center">
                        <span>${step.name}</span>
                        <button class="btn btn-link text-danger delete-step">×</button>
                    </div>
                    <small class="text-muted">${step.protocol}</small>
                </div>
            `);
        });
    }

    // 高亮当前步骤
    highlightStep(stepId) {
        $('.step-item').removeClass('active');
        $(`.step-item[data-id="${stepId}"]`).addClass('active');
    }

    // 防抖处理
    debounce(fn, delay = 300) {
        let timeout;
        return (...args) => {
            clearTimeout(timeout);
            timeout = setTimeout(() => fn.apply(this, args), delay);
        };
    }

    isSslEnabled() {
        return $('#ssl-checkbox').prop('checked');
    }
}

// 初始化编辑器
$(document).ready(() => {
    window.editor = new TestCaseEditor();
});
</script>
</body>
</html>